<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {fileRemoveService} from "@/api/modules/file.js";
import {carAddService, carQueryService, carRemoveService, carUpdateService} from "@/api/modules/car.js";

defineOptions({name: 'CarType'})
const getCarList = async () => {
  carList.value = await carQueryService()
}

const carList = ref([])

onMounted(async () => {
  await getCarList()
})

const showDetail = ref(false)

const detailModel = ref({})

const handleDetail = (row) => {
  showDetail.value = true
  detailModel.value = row
  coverUrl.value = row.coverImage
  if (row.picture1) {
    picList.value.push({name: row.picture1, url: row.picture1})
  }
  if (row.picture2) {
    picList.value.push({name: row.picture2, url: row.picture2})
  }
  if (row.picture3) {
    picList.value.push({name: row.picture3, url: row.picture3})
  }
}

const closeDetail = () => {
  showDetail.value = false
  detailModel.value = {}
  showEditSave.value = false
  picList.value = []
  coverUrl.value = ''
}

const showEditSave = ref(false)
const handleEdit = (row) => {
  detailModel.value = row
  showDetail.value = true
  showEditSave.value = true
  coverUrl.value = row.coverImage
  if (row.picture1) {
    picList.value.push({name: row.picture1, url: row.picture1})
  }
  if (row.picture2) {
    picList.value.push({name: row.picture2, url: row.picture2})
  }
  if (row.picture3) {
    picList.value.push({name: row.picture3, url: row.picture3})
  }
}

const editSave = async () => {
  console.log(picList.value)
  const pictureList = picList.value.map(item => item.response?.data || item.url)
  if (pictureList[0]) {
    detailModel.value.picture1 = pictureList[0]
  }
  if (pictureList[1]) {
    detailModel.value.picture2 = pictureList[1]
  }
  if (pictureList[2]) {
    detailModel.value.picture3 = pictureList[2]
  }
  detailModel.value.coverImage = coverUrl.value
  // 发起修改请求
  await carUpdateService(detailModel.value)
  closeDetail()
  await getCarList()
}

const handleRemove = async (id) => {
  // 通过id删除
  await carRemoveService(id)
  await getCarList()
}

const showAdd = ref(false)
const addModel = ref({})

const handleAdd = () => {
  showAdd.value = true
}
const closeAdd = () => {
  showAdd.value = false
  addModel.value = {}
  picList.value = []
  coverUrl.value = ''
}
const addSave = async () => {
  const pictureList = picList.value.map(item => item.response.data)
  if (pictureList[0]) {
    addModel.value.picture1 = pictureList[0]
  }
  if (pictureList[1]) {
    addModel.value.picture2 = pictureList[1]
  }
  if (pictureList[2]) {
    addModel.value.picture3 = pictureList[2]
  }
  addModel.value.coverImage = coverUrl.value
  // 发起添加请求
  await carAddService(addModel.value)
  closeAdd()
  await getCarList()
}

const baseUrl = import.meta.env.VITE_APP_BASE_API
const showPicPreview = ref(false)
const previewPicUrl = ref('')
const picList = ref([])
const picUploadUrl = ref(`${baseUrl}/admin/file/upload`)
const handlePicPreview = (event) => {
  showPicPreview.value = true
  previewPicUrl.value = event.url
}
const beforeUpload = async (event) => {
  if (event.type !== 'image/jpeg' && event.type !== 'image/png') {
    ElMessage.error('仅支持 jpg、png 格式的图片')
    return false
  }
}
const onExceed = () => {
  ElMessage.error('超出图片上传个数的限制~')
}

const onRemove = async (event) => {
  await fileRemoveService(event.response.data)
}

const coverUrl = ref('')
const beforeCoverUpload = (event) => {
  if (event.type !== 'image/jpeg' && event.type !== 'image/png') {
    ElMessage.error('仅支持 jpg、png 格式的图片')
    return false
  }
}

const handleCoverSuccess = (event) => {
  coverUrl.value = event.data
}


</script>

<template>

  <!--  添加 抽屉-->
  <el-drawer size="100%" direction="ttb" v-model="showAdd" @close="closeAdd">
    <template #header>
      <div class="drawer-header">车型添加</div>
    </template>
    <template #default>
      <div class="drawer-content">
        <el-form :model="addModel" label-position="right" label-width="150" class="form">
          <el-form-item label="名称">
            <el-input v-model="addModel.name"></el-input>
          </el-form-item>
          <el-form-item label="车型封面图">
            <el-upload
                class="avatar-uploader"
                :action="picUploadUrl"
                :show-file-list="false"
                :on-success="handleCoverSuccess"
                :before-upload="beforeCoverUpload"
                :on-remove="onRemove"
            >
              <el-image v-if="coverUrl" :src="coverUrl" class="avatar" alt=""/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="轮播图">
            <el-upload
                v-model:file-list="picList"
                :action="picUploadUrl"
                list-type="picture-card"
                :on-preview="handlePicPreview"
                :before-upload="beforeUpload"
                :on-exceed="onExceed"
                :limit="3"
                :on-remove="onRemove"
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
            <el-dialog v-model="showPicPreview">
              <el-image :src="previewPicUrl" alt="Preview Image"/>
            </el-dialog>
          </el-form-item>
          <el-form-item label="起步费(单位:元)">
            <el-input v-model="addModel.startFee" type="number"></el-input>
          </el-form-item>
          <el-form-item label="规格(单位:米)">
            <el-input v-model="addModel.specification"></el-input>
          </el-form-item>
          <el-form-item label="封面描述">
            <el-input autosize type="textarea" v-model="addModel.shortDesc"></el-input>
          </el-form-item>
          <el-form-item label="可装载">
            <el-input autosize type="textarea" v-model="addModel.description"></el-input>
          </el-form-item>
          <el-form-item label="不可装载">
            <el-input autosize type="textarea" v-model="addModel.cannotLoad"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #footer>
      <div class="drawer-footer">
        <el-button type="primary" size="large" class="save-tbn" @click="addSave">保存</el-button>
      </div>
    </template>
  </el-drawer>

  <!--  详情/编辑 抽屉-->
  <el-drawer size="100%" direction="btt" v-model="showDetail" @close="closeDetail">
    <template #header>
      <div class="drawer-header">{{ showEditSave ? '车型编辑' : '车型详情' }}</div>
    </template>
    <template #default>
      <div class="drawer-content">
        <el-form :model="detailModel" label-position="right" :disabled="!showEditSave" label-width="150" class="form">
          <el-form-item label="名称">
            <el-input v-model="detailModel.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="车型封面图">
            <el-upload
                class="avatar-uploader"
                :action="picUploadUrl"
                :show-file-list="false"
                :on-success="handleCoverSuccess"
                :before-upload="beforeCoverUpload"
                :on-remove="onRemove"
            >
              <img v-if="coverUrl" :src="coverUrl" class="avatar"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="轮播图">
            <el-upload
                v-model:file-list="picList"
                :action="picUploadUrl"
                list-type="picture-card"
                :on-preview="handlePicPreview"
                :before-upload="beforeUpload"
                :on-exceed="onExceed"
                :limit="3"
                :on-remove="onRemove"
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
            <el-dialog v-model="showPicPreview">
              <img w-full :src="previewPicUrl" alt="Preview Image"/>
            </el-dialog>
          </el-form-item>
          <el-form-item label="起步费(单位:元)">
            <el-input v-model="detailModel.startFee" type="number"></el-input>
          </el-form-item>
          <el-form-item label="规格(单位:米)">
            <el-input v-model="detailModel.specification"></el-input>
          </el-form-item>
          <el-form-item label="封面描述">
            <el-input autosize type="textarea" v-model="detailModel.shortDesc"></el-input>
          </el-form-item>
          <el-form-item label="可装载">
            <el-input autosize type="textarea" v-model="detailModel.description"></el-input>
          </el-form-item>
          <el-form-item label="不可装载">
            <el-input autosize type="textarea" v-model="detailModel.cannotLoad"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #footer>
      <div class="drawer-footer">
        <el-button type="primary" size="large" class="save-tbn" v-if="showEditSave" @click="editSave">保存</el-button>
      </div>
    </template>
  </el-drawer>

  <!--  表格展示-->
  <el-card>
    <template #header>
      <el-button @click="handleAdd" type="success" v-hasPerm="'biz:carType:dml'">添加车型</el-button>
    </template>
    <el-table :data="carList" style="width: 100%">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="name" label="名称" width="120"/>
      <el-table-column prop="startFee" label="起步费(单位:元)" width="140"/>
      <el-table-column prop="specification" label="规格(单位:米)" width="120"/>
      <el-table-column prop="createTime" label="创建时间" width="150" sortable show-overflow-tooltip/>
      <el-table-column prop="updateTime" label="更新时间" width="150" sortable show-overflow-tooltip/>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button circle icon="MoreFilled" @click="handleDetail(row)" type="success" plain title="详情" v-hasPerm="'biz:carType:dql'"></el-button>
          <el-button circle icon="Edit" @click="handleEdit(row)" type="primary" plain title="编辑" v-hasPerm="'biz:carType:dml'"></el-button>
          <el-popconfirm title="你确定删除吗？" @confirm="handleRemove(row.id)">
            <template #reference>
              <el-button circle icon="Delete" color="red" plain title="删除" v-hasPerm="'biz:carType:dml'"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style lang="scss" scoped>

.el-card {
  padding: 0;
  height: 100%;

  :deep .el-card__header {
    height: 50px;
    padding: 10px;
  }

  :deep .el-card__body {
    height: calc(100% - 50px);
    padding: 10px;
  }
  .el-table {
    height: calc(100%);
  }
}

.drawer-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.drawer-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  .form {
    width: 70%;
  }
}

.drawer-footer {
  display: flex;
  justify-content: center;
  align-items: center;

  .save-tbn {
    width: 30%;
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
}
</style>
